import { Component } from 'react';
import { AiOutlineCamera } from 'react-icons/ai';
import './BdSearch.scss'
class BdSearch extends Component {
  state = { content: '', queryArr: [] };

  // input框获取焦点更改边框颜色
  focusBorder = (e) => {
    e.target.style.border = '2px solid #4e6ef2';
    e.target.style.borderRight = 'none';
  };
  // input框失去焦点更改边框颜色
  blurBorder = (e) => {
    setTimeout(() => {
      e.target.style.border = '2px solid #c4c7ce';
      e.target.style.borderRight = 'none';
      this.setState({
        queryArr: [],
      });
    }, 300);
  };
  // 文本框输入内容模糊查询
  onQuire = (e) => {
    // 将热搜列表中包含e.target。value的过滤，放入新数组
    this.setState({
      content: e.target.value,
      queryArr: this.props.searchArr.filter((item) =>
        e.target.value ? item.includes(e.target.value) : false
      ),
    });
  };
  // 点击搜索列表将文字赋给文本框
  onGetText = (content) => {
    this.setState({
      content,
      queryArr: [],
    });
  };

  render() {
    const { content, queryArr } = this.state;
    return (
      <form className="bd-search">
        <span className={queryArr.length ? 'input selectlist' : 'input'}>
          <input
            type="text"
            onFocus={this.focusBorder}
            onBlur={this.blurBorder}
            value={content}
            onChange={this.onQuire}
          />
          {/* 模糊查询列表 */}
          <div className="searchlist">
            <ul>
              {queryArr.length
                ? queryArr.map((item, index) => (
                    <li onClick={() => this.onGetText(item)} key={index}>
                      {item}
                    </li>
                  ))
                : ''}
            </ul>
          </div>
          {/* 相机 */}
          <AiOutlineCamera className="icon-camera" />
        </span>
        <span className="btn">
          <input type="submit" value="百度一下" />
        </span>
      </form>
    );
  }
}

export default BdSearch;
